<template>
  <view class="page">
    <scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">
      <view style="padding: 30rpx 30rpx 240rpx;">
        <view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index">
          <image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
          <view class="content" v-if="item.messageType === 'image'">
            <image :src="item.content" mode="widthFix"></image>
          </view>
          <view class="content" v-else>
            {{ item.content }}
          </view>
          <image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
        </view>
      </view>
    </scroll-view>
    <view class="tool">
      <input type="text" v-model="content" class="input" @confirm="send" />
      <button class="consult-button" @click="send">提交</button>
      <image src="/static/photo.png" mode="widthFix" class="thumb" @click="chooseImage"></image>
    </view>
    <view>
      <!-- 表单弹出框 -->
<!--      <uni-popup :show="showPopup" @close="showPopup = false">-->
<!--        <form @submit="submitForm">-->
<!--          <view class="form-item">-->
<!--            <text>患者：</text>-->
<!--            <input type="text" placeholder="请输入患者" v-model="form.patientId" />-->
<!--          </view>-->
<!--          <view class="form-item">-->
<!--            <text>出生日期：</text>-->
<!--            <input type="password" placeholder="请输入出生日期" v-model="form.birthDate" />-->
<!--          </view>-->
<!--          <view class="form-item">-->
<!--            <text>性别：</text>-->
<!--            <input type="password" placeholder="请输入性别" v-model="form.gender" />-->
<!--          </view>-->
<!--          <view class="form-item">-->
<!--            <text>与患者关系：</text>-->
<!--            <input type="password" placeholder="请输入与患者关系" v-model="form.relationshipWithPatient" />-->
<!--          </view>-->
<!--          <button form-type="submit">提交</button>-->
<!--        </form>-->
<!--      </uni-popup>-->
      <view>
        <!-- Form -->
        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

        <el-dialog title="患者信息" :visible.sync="dialogFormVisible">
          <el-form :model="patientDiagnosisRecord">
            <el-form-item label="患者" :label-width="formLabelWidth">
              <el-input v-model="patientDiagnosisRecord.patientId" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="出生日期" :label-width="formLabelWidth">
              <el-date-picker
                  v-model="patientDiagnosisRecord.birthDate"
                  type="date"
                  placeholder="选择日期">
              </el-date-picker>
<!--              <el-input v-model="form.birthDate" autocomplete="off"></el-input>-->
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-input v-model="patientDiagnosisRecord.gender" autocomplete="off"></el-input>
<!--              <el-radio v-model="patientDiagnosisRecord.gender" label="男">男</el-radio>-->
<!--              <el-radio v-model="patientDiagnosisRecord.gender" label="女">女</el-radio>-->
            </el-form-item>
            <el-form-item label="与患者关系" :label-width="formLabelWidth">
              <el-input v-model="patientDiagnosisRecord.relationshipWithPatient" autocomplete="off"></el-input>
<!--              <el-radio v-model="patientDiagnosisRecord.relationshipWithPatient" label="本人">本人</el-radio>-->
<!--              <el-radio v-model="patientDiagnosisRecord.relationshipWithPatient" label="亲属关系">亲属关系</el-radio>-->
<!--              <el-radio v-model="patientDiagnosisRecord.relationshipWithPatient" label="朋友/熟人关系">朋友/熟人关系</el-radio>-->
<!--              <el-radio v-model="patientDiagnosisRecord.relationshipWithPatient" label="其他关系">其他关系</el-radio>-->
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addPatientDiagnosisRecord">确 定</el-button>
          </div>
        </el-dialog>
      </view>
      <view>
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

        <el-dialog title="医生列表" :visible.sync="dialogTableVisible">
<!--          <el-table :data="doctorList">-->
<!--            <el-table-column property="date" label="日期" width="150"></el-table-column>-->
<!--            <el-table-column property="name" label="姓名" width="200"></el-table-column>-->
<!--            <el-table-column property="address" label="地址"></el-table-column>-->
<!--          </el-table>-->
          <view class="container">
            <view class="doctor-list-wrapper">
              <view class="doctor-info" v-for="(doctor, index) in doctorList" :key="index">
                <view class="doctor-left">
                  <image class="doctor-avatar" :src="doctor.profilePic" mode="aspectFill" @click="doctorDetail(doctor)"></image>
                </view>
                <view class="doctor-right">
                  <view class="doctor-detail">
                    <text class="doctor-name">{{ doctor.name }}</text>
                    <view class="doctor-meta">
                      <text class="doctor-title" style="color: red;">{{ doctor.hospitalName }}</text>
                      <text class="doctor-specialty">{{ doctor.departmentsName }}</text>
                      <text class="doctor-specialty">问诊金额：{{ doctor.money }}</text>
                    </view>
                    <view class="doctor-hospital-info">
                      <text class="doctor-hospital">{{ doctor.hospital }}</text>
                      <text class="hospital-level" v-if="doctor.hospitalLevel === 0">三甲医院</text>
                      <text class="hospital-level" v-if="doctor.hospitalLevel === 1">二甲医院</text>
                      <text class="hospital-level" v-if="doctor.hospitalLevel === 2">一甲医院</text>
                    </view>
                  </view>
                </view>
                <view class="doctor-left">
                  擅长: <text class="doctor-bio">{{ doctor.bio }}</text>
                </view>
              </view>
            </view>
          </view>
        </el-dialog>
      </view>
    </view>
  </view>
</template>

<script>
import {
  addPatientDiagnosisRecordOption,
  searchDoctorByDisease,
  selectAllByQueryAndVague
} from "@/api/websocket/websocket";
import {updateUserOrder} from "@/api/medicine/orders";

export default {
  data() {
    return {
      content: '',
      list: [],
      top: 0,
      count: 0,
      medicalConsultationRecord: { //问诊记录表
        id: null,
        inquiryId: null,
        sender: null,
        content: ''
      },
      patientConditionDescription: { //问诊表
        id: null,
        consultantId: null,
        relationshipWithPatient: '',
        patientId: null,
        doctorId: null,
        conditionDescription: ''
      },
      patientDiagnosisRecord: { //患者诊断记录
        id: null,
        patientId: null,
        birthDate: '',
        gender: '',
        doctorId: null,
        medicineId: null,
        inquiryId: null
      },
      showPopup: false, // 控制弹出框的显示
      form: {           // 表单数据
        patientId: null,//患者
        birthDate: '',//出生日期
        gender: '',//性别
        relationshipWithPatient: '',//与患者关系
        conditionDescription: ''
      },
      dialogFormVisible: false,
      formLabelWidth: '120px',
      selectEsDocDto: {
        indexName: 'disease',
        pageInfo:{
          num: null,
          size: null
        },
        orderInfo: {
          orderType: null,
          orderField: null
        },
        matchQueryInfo: {
          keyWord: '',
          searchFields: ['name','descripton','highIncidenceGroup','symptom','pathogenesis','examine', 'diagnosisAndDifferentiation']
        }
      },
      message: '',
      doctorList: [],
      dialogTableVisible: false,
      patientDiagnosisRecordId: null,
    };
  },
  onLoad(options) {
    uni.setNavigationBarTitle({
      title: options.name
    })
    this._friendAvatar = '/static/intelligent.png'
    this._selfAvatar = '/static/ai.jpg'
    this.list = [
      {
        content: '您好，我是智能助手，请在下方输\n' +
            '入框详细描述病情，以便医生准确\n' +
            '了解您的情况，快速接诊',
        userType: 'friend',
        avatar: this._friendAvatar
      },
    ]
  },
  methods: {
    //跳转医生详情页面
    doctorDetail(item) {
      let id = item.id;
      uni.navigateTo({
        url: `/pages/doctor/doctor?id=${id}&patientDiagnosisRecordId=`+this.patientDiagnosisRecordId,
      })
    },
    send() {
      this.list.push({
        content: this.content,
        userType: 'self',
        avatar: this._selfAvatar
      })
      if (0 == this.count){
        this.patientConditionDescription.conditionDescription = this.content
        this.selectEsDocDto.matchQueryInfo.keyWord = this.content
        this.message = this.content
      }
      this.content = ''
      //计数，判断是否发送
      this.scrollToBottom()
      this.count++;
      // 模拟对方回复
      setTimeout(()=>{
        if (1 == this.count){
          this.list.push({
            content: '请问您想为以下哪位患者咨询?',
            userType: 'friend',
            avatar: this._friendAvatar,
          })
          this.dialogFormVisible = true
        }
        //查询一下该问诊人的问诊记录列表，展示该问诊人的最后一次问诊病情
        if (2 == this.count){
          this.list.push({
            content: '正在为您匹配医生，请等候',
            userType: 'friend',
            avatar: this._friendAvatar
          })
          console.log("打印信息"+this.message)
          this.searchDoctor()
          this.dialogTableVisible = true
        }
        //查询一下该问诊人的问诊记录列表，展示该问诊人的问诊患者
        // if (3 == this.count){
        //   this.list.push({
        //     content: 'dsfd?',
        //     userType: 'friend',
        //     avatar: this._friendAvatar
        //   })
        // }

        // this.scrollToBottom()
      }, 1500)
    },
    chooseImage() {
      uni.chooseImage({
        // sourceType: 'album',
        success: (res) => {
          this.list.push({
            content: res.tempFilePaths[0],
            userType: 'self',
            messageType: 'image',
            avatar: this._selfAvatar
          })
          this.scrollToBottom()
          // 模拟对方回复
          setTimeout(()=>{
            this.list.push({
              content: '你好呀，朋友~',
              userType: 'friend',
              avatar: this._friendAvatar
            })
            this.scrollToBottom()
          }, 1500)
        }
      })
    },
    scrollToBottom() {
      this.top = this.list.length * 1000
    },
    addPatientDiagnosisRecord(){
      let superThis = this
      let msg = null;
      superThis.patientDiagnosisRecord.conditionDescription = superThis.message
      addPatientDiagnosisRecordOption(superThis.patientDiagnosisRecord).then(res => {
        this.patientDiagnosisRecordId = res.data
        msg = '患者:'+superThis.patientDiagnosisRecord.patientId+','
            +'出生日期:'+superThis.patientDiagnosisRecord.birthDate
            +'性别:'+superThis.patientDiagnosisRecord.gender
            +'与患者关系:'+superThis.patientDiagnosisRecord.relationshipWithPatient;
        uni.hideLoading();
        superThis.dialogFormVisible = false;
        this.list.push({
          content: msg,
          userType: 'self',
          avatar: this._selfAvatar
        })
      })
      this.send()
    },
    searchDoctor() {
      console.log(this.message)
      searchDoctorByDisease(this.message).then(res => {
        this.doctorList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.scroll-view {
  /* #ifdef H5 */
  height: calc(100vh - 44px);
  /* #endif */
  /* #ifndef H5 */
  height: 100vh;
  /* #endif */
  background: #eee;
  box-sizing: border-box;
}


/* 容器样式 */
.container {
  padding: 10px;
}

/* 医生列表容器样式 */
.doctor-list-wrapper {
  display: flex;
  flex-direction: column;
  background-color: #f9f9f9;
  padding: 3px;
  border-radius: 8px;
}

/* 医生信息块样式 */
.doctor-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  background-color: #ffffff;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* 头像左侧容器样式 */
.doctor-left {
  flex: 0 0 100px; /* 固定宽度为100px */
  margin-right: 15px;
}

/* 头像样式 */
.doctor-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

/* 文字信息右侧容器样式 */
.doctor-right {
  flex: 1; /* 占据剩余空间 */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

/* 医生详细信息样式 */
.doctor-detail {
  width: 100%;
}

/* 医生姓名样式 */
.doctor-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

/* 医生元信息样式（医院名称和科室） */
.doctor-meta {
  margin-bottom: 15px;
}

.doctor-title {
  font-size: 16px;
  color: red;
  margin-bottom: 5px;
}

.doctor-specialty {
  font-size: 14px;
  color: #555555;
}






.form-item {
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

/* 头像样式 */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;

  .avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    margin-right: 30rpx;
  }
  .content {
    min-height: 80rpx;
    max-width: 60vw;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 1.3;
    padding: 20rpx;
    border-radius: 10rpx;
    background: #fff;
    image {
      width: 200rpx;
    }
  }
  &.self {
    justify-content: flex-end;
    .avatar {
      margin: 0 0 0 30rpx;
      border-radius: 50%;
    }
    .content {
      position: relative;
      &::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border: 16rpx solid transparent;
        border-left: 16rpx solid #fff;
        right: -28rpx;
        top: 24rpx;
      }
    }
  }
  &.friend {
    .content {
      position: relative;
      &::after {
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border: 16rpx solid transparent;
        border-right: 16rpx solid #fff;
        left: -28rpx;
        top: 24rpx;
      }
    }
  }
}

.tool {
  position: fixed;
  width: 100%;
  min-height: 120rpx;
  left: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  padding: 20rpx 24rpx 20rpx 40rpx;
  padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;
  .input {
    background: #eee;
    border-radius: 10rpx;
    height: 70rpx;
    margin-right: 30rpx;
    flex: 1;
    padding: 0 20rpx;
    box-sizing: border-box;
    font-size: 28rpx;
  }
  .thumb {
    width: 64rpx;
  }
}
</style>
